<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>登录</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Bootstrap手机框架">
	<meta name="keywords" content="amaze ui,mobile ,移动UI">
    <meta name="author" content="amaze-mobile">
     <link href="amaze/css/amazeui.min.css" rel="stylesheet">
     <link href="css/app.css" rel="stylesheet">
<style type="text/css">
	.login{margin:0 auto;text-align:center;}
	
</style>
</head>

<body class="login">
<div class="logo-img">
	<img src="images/logo.jpg" class="am-circle" style="width:80px;height:80px;"/>
</div>

<div class="content">
	<form class="am-form" action="index.html" method="post" id="login-form">
    	<div class="am-form-group am-form-icon am-form-danger">
            <i class="am-icon-user"></i>
            <input type="text" class="am-form-field"id="username" name="username" placeholder="用户名" required required data-foolish-msg="用户名不能为空！">
         </div>
         
         <div class="am-form-group am-form-icon am-form-danger">
            <i class="am-icon-lock"></i>
            <input type="password" class="am-form-field"  id="password" name="password" placeholder="密码" required data-foolish-msg="密码不能为空！">
         </div>
    
        
        <div class="form-actions">
        	<button  type="submit" class="am-btn am-btn-danger width80" id="loginbtn">登录</button>
        </div>
    </form>

</div>

<nav class="am-topbar-fixed-bottom">
 	<a href="#" class="am-fl am-padding-bottom-sm am-padding-left am-text-danger" id="problem" data-am-modal="{target:'#problem-actions'}">问题反馈</a>
    <a href="#" class="am-fr am-padding-bottom-sm am-padding-right am-text-danger" id="newuser">新用户</a>
</nav>

<div class="am-modal-actions" id="problem-actions">
	<div class="am-modal-actions-group">
		<ul class="am-list">
			<li class="am-modal-actions-header">发送问题</li>
			<li ><a href="#"><span class="am-icon-wechat"></span> 分享到微信</a></li>
			<li class="am-modal-actions-danger"><a href="#"><i class="am-icon-twitter"></i>发现严重问题</a></li>
		</ul>
	</div>
	<div class="am-modal-actions-group">
		<button class="am-btn am-btn-danger am-btn-block" data-am-modal-close>取消</button>
	</div>
 </div>





<script src="jquery/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="amaze/js/amazeui.min.js" type="text/javascript"></script>
<script src="js/message.js" type="text/javascript"></script>

<script type="text/javascript">
	$(function(){
		/*$("#loginbtn").click(function(){
			if($("#username").val()==""){
				am_alert("警告","用户名不能为空");
				return false;
			}
			if($("#password").val()==""){
				am_alert("警告","密码不能为空");
				return false;
			}
			if($("#username").val()=="a"&&$("#password").val()=="a"){
				$("#login-form").submit();
				return false;
			}else{
				am_alert("错误","用户名或密码错误");
				return false;
			}	
			
		});
		*/
		
		var $form = $('#login-form');
  var $tooltip = $('<div id="vld-tooltip">提示信息！</div>');
  $tooltip.appendTo(document.body);

  $form.validator({submit:function(){
	  if(this.isFormValid()){
		   if($("#username").val()=="a"&&$("#password").val()=="a"){
				return true;
			}else{
				am_alert("错误","用户名或密码错误");
				return false;
			}	
	  }
	  return false;
	 
	 }});

  var validator = $form.data('amui.validator');

  $form.on('focusin focusout', '.am-form-error input', function(e) {
    if (e.type === 'focusin') {
      var $this = $(this);
      var offset = $this.offset();
      var msg = $this.data('foolishMsg') || validator.getValidationMessage($this.data('validity'));

      $tooltip.text(msg).show().css({
        left: offset.left + 10,
        top: offset.top + $(this).outerHeight() + 10
      });
    } else {
      $tooltip.hide();
    }
  });
		
		
		
	})

</script>

</body>
</html>
